<template>
  <div class="app-container" style="padding: 20px;">
    <el-form :model="param" ref="queryForm" :inline="true">
      <!-- <el-form-item>
        <el-button type="cyan" size="mini" @click="$router.push('/sharingList/sharingList')" >返回分享列表</el-button>
        <el-button size="mini" @click="addGoodsAll()">批量添加</el-button>
      </el-form-item> -->
      <div>
        <div style="float:left" class="font-weight--lg font-size--lg">添加商品</div>
        <el-form-item class="zsg">
           <el-button type="primary" @click="addGoodsAll()">批量添加</el-button>
       </el-form-item>
       <div style="clear: both;"></div>
      </div>
      <el-form-item label="商品名称：">
        <el-input style="width: 100%;" v-model="param.title" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="商品分类：">
        <el-cascader placeholder="请输入商品分类：" :options="options" :show-all-levels="false" v-model="categoryId"
                     :props="{ value: 'id',label:'title',children:'goodsCategoryModelList' }"></el-cascader>
      </el-form-item>
      <el-form-item label="销售价：">
        <el-col :span="11">
          <el-input style="width: 100%;" v-model="param.minPrice" placeholder="0"></el-input>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-input style="width: 100%;" v-model="param.maxPrice" placeholder="0"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <!-- <el-button type="cyan" icon="el-icon-search" size="mini" @click="getGoodsList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
        <el-button @click="getGoodsList" type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      border
      @selection-change="handleSelectionChange"
      :header-cell-style="tableHeaderStyle"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="序号"
        type="index"
        width="80">
      </el-table-column>
      <el-table-column
        prop="nsrsbh"
        width="150"
        label="商品图片">
        <template slot-scope="scope">
          <div class="goodsBox">
            <img :src="baseImgUrl+'/'+scope.row.surfaceImg" alt="">
            <!-- <p>{{scope.row.title}}</p> -->
          </div>
        </template>
      </el-table-column>
       <el-table-column
        prop="nsrsbh"
        width="240"
        label="商品名称">
        <template slot-scope="scope">
          <div class="goodsBox">
            <p>{{scope.row.title}}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="goodsNo"
        width="240"
        label="商品编码">
      </el-table-column>
       <el-table-column
        prop="categoryTitle"
        label="商品分类">
      </el-table-column>
      <el-table-column
        label="成本价">
        <template slot-scope="scope">
        <span>{{scope.row.minPrice}}~{{scope.row.maxPrice}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="salesVolume"
         width="150"
        label="价格">
      </el-table-column>  
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button
            type="primary"
            @click="addGoods(scope.row)"
            size="small">
            添加
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="paginationBox">
      <el-pagination
        :page-sizes="[10, 50, 100, 200]"
        :page-size.sync="param.pageSize"
        :current-page.sync="param.pageNum"
        @size-change="getGoodsList"
        @current-change="getGoodsList"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <add-dialog
      :dialogFormVisible="dialogFormVisible"
      :addList="addList"
      :levelList="levelList"
      @closeDialog="closeDialog"
      @saveShareGood="saveShareGood"
      @saveShareGoodsBatch="saveShareGoodsBatch"/>
  </div>
</template>

<script>
  import { getGoodsList, getGoodsCategoryList,saveShareGood,saveShareGoodsBatch,getShareSettings } from '@/api/setSharing'
  import addDialog from "./components/add/dialogs"
  import Setting from '@/settings';
  export default {
    name: 'fsjjc',
    data() {
      return {
        param: {
          pageNum:1,
          pageSize:10,

        },
        tableData: [],
        options: [],
        categoryId:[],
        total:0,
        baseImgUrl:process.env.VUE_APP_FILE_URL,
        dialogFormVisible:false,
        addList:[],
        multipleSelection:[],
        levelList:[],
        tableHeaderStyle: Setting.tableHeaderStyle,
      }
    },
    components:{
      addDialog
    },
    watch: {
      categoryId(val) {
        if (val.length != 0) {
          this.param.categoryId = val[val.length - 1]
        }
      }
    },
    created() {
      this.getGoodsList()
      this.getGoodsCategoryList()
      this.getShareSettings()
    },
    methods: {
      resetQuery() {
        this.param = { pageNum:1,
          pageSize:10,}
        this.categoryId=[]
        this.getGoodsList()
      },
      handleSelectionChange(val){
        console.log(val)
        this.multipleSelection = val;
      },
      getShareSettings(){
        getShareSettings().then(res=>{
          console.log(res)
          if(res.code  == 200){
            this.levelList = res.data.levelList
          }
        })
      },
      addGoodsAll(){
        if(this.multipleSelection.length==0){
          this.$message("请选择商品")
          return false
        }
        this.dialogFormVisible= true
        this.addList = this.multipleSelection
      },
      getGoodsList() {
        console.log(this.param)
        getGoodsList(this.param).then(res => {
          if (res.code == 200) {
            this.tableData = res.data.list
            this.total = res.data.total
          }
        })

      },
      getGoodsCategoryList() {
        getGoodsCategoryList().then(res => {
          if (res.code == 200) {
            this.options = res.data
          }
        })

      },
      addGoods(row){
        this.dialogFormVisible= true
        this.addList =[row]
      },
      closeDialog(){
        this.dialogFormVisible= false
      },
      saveShareGood(param){
        param.creatorId = JSON.parse(this.$store.getters.userInfo).id ? JSON.parse(this.$store.getters.userInfo).id : '1'
        param.goodsId = this.addList[0].id
        saveShareGood(param).then(res=>{
          if(res.code  ==200){
            this.$message({
              message: '商品添加成功',
              type: 'success'
            })
            this.dialogFormVisible= false
            this.getGoodsList()
          }else{
            this.$message.error(res.msg);

          }
        })
      },
      saveShareGoodsBatch(param){
        param.creatorId = JSON.parse(this.$store.getters.userInfo).id ? JSON.parse(this.$store.getters.userInfo).id : '1'
        param.shareGoodsList=[]
          this.addList.forEach(item=>{
            param.shareGoodsList.push({
              'goodsId':item.id
            })
        })
        saveShareGoodsBatch(param).then(res=>{
          if(res.code  ==200){
            this.$message({
              message: '商品添加成功',
              type: 'success'
            })
            this.dialogFormVisible= false
            this.getGoodsList()
          }else{
            this.$message.error(res.msg);

          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .line {
    text-align: center !important;
  }
  .goodsBox{
    img{
      width: 50px;
      height: 50px;
    }
  }
  .app-container{
    background: #fff;
    margin: 15px 25px;
    border-radius: 6px;
    background: #fff;
    -webkit-box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
    box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  }
  .zsg{
  float: right;
}
::v-deep .el-form-item__label{
  padding: 0;
}
::v-deep .el-form--inline .el-form-item{
  margin-right: 30px!important;
}
::v-deep .el-table .cell{
  text-align: center;
}
::v-deep .el-table--border td{
    border-right: none!important;
}
::v-deep .el-table--border th{
    border-right: none!important;
}
::v-deep .el-table--border{
  border: none;
}
.el-table--striped .el-table__body tr.el-table__row--striped td{
  background:none;
}
</style>
